<template>
  <!-- 交易密码弹层 -->
  <div class="pass-mask-wrap" v-show="showBool">
    <div @click.stop.prevent="clickBool" class="pass-mask">
    </div>
    <div class="pass-cont-wrap">
      <h3 class="pass-title">
        {{'C2C_TRADE'|t}}
      </h3>
      <div class="pass-cont">
        <p>
          {{'USER_TRADE_PASS_PLACE'|t}}:
        </p>
        <zx-input :place="$t('USER_TRADE_PASS_PLACE')" :rules="rules.password" class="input-pass" ref="pass" type="password" v-model="passForm.pass">
        </zx-input>
      </div>
      <div @click="submitForm('passForm',$event)" class="submit-btn">
        {{$route.query.type=='sell'?$t('SELL_IMMEDIATELY'):$t('PURCHASE_IMMEDIATELY')}}
      </div>
    </div>
  </div>
</template>
<script>
  import { Form, Rules } from '@/providers';
  export default {
    name: 'pass-mask',
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showBool: this.value,
        passForm: {
          pass: ''
        },
        rules: Rules
      };
    },
    watch: {
      value(val) {
        this.showBool = val;
        this.passForm.pass = '';
      },
      showBool(val) {
        if (val) {
          this.lockScroll();
        } else {
          this.unLockScroll();
        }
        this.$emit('input', val);
      }
    },
    methods: {
      unLockScroll() {
        window.onmousewheel = (event) => {
          return true;
        };
      },
      lockScroll() {
        window.onmousewheel = (event) => {
          return false;
        };
      },
      clickBool() {
        this.showBool = !this.showBool;
      },
      async submitForm(formName, $event) {
        if (!Form.validataForm(this, formName)) {
          return false;
        }
        this.showBool = false;
        this.$emit('submit', this[formName].pass, $event);
      }
    }
  };
</script>
<style lang="scss" scoped="">
  .pass-mask-wrap {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
    .pass-mask {
      position: fixed;
      background: rgba(0, 0, 0, 0.5);
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
    .pass-cont-wrap {
      background: white;
      width: 80%;
      /* margin: 0 auto; */
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .pass-title {
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        background: rgba(71, 69, 70, 1);
        color: white;
        font-size: 1.8rem;
      }
      .pass-cont {
        padding: 2rem 0;
        text-align: center;
        display: flex;
        align-content: center;
        justify-content: center;
        flex-direction: column;
        p {
          color: rgba(71, 69, 70, 1);
          height: 2rem;
          line-height: 2rem;
          font-size: 1.6rem;
          margin-bottom: 1.5rem;
        }
        .input-pass {
          width: 80%;
          height: 3.5rem;
          border: 1px solid rgba(228, 228, 228, 1);
          padding: 0 0.4rem;
          line-height: 1.6rem;
          margin: 0 auto;
        }
      }
      .submit-btn {
        background: rgba(1, 157, 250, 1);
        color: white;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        font-size: 1.6rem;
        padding: 0;
      }
    }
  }
</style>